<template>
  <!-- <view class="search">此处是搜索框</view> -->
  <view class="allBack">
    <top-blank class="topBlank"></top-blank>
    <view class="Tab">
      <base-tab class="topbar" :tabIndex="tabIndex" :tabList="tabList" @changeTab="changeTab"></base-tab>
      <!-- 在这里添加显示不同标签内容的部分 -->

      <view class="content" v-for="(item, index) in tabListLength">
        <view v-show="tabIndex === index">
          <view class="common-style" :style="getCommonStyle(index)">
            <view v-for="(item, index) in showAccessories">
              <view v-show="item.systemName === clickLabel">
                <universal-item-ccessories :ccessoriesName="item.name" :price="item.price">
                </universal-item-ccessories>
              </view>
            </view>
          </view>
        </view>
      </view>

      <view v-if="loadMoreMessage  && pageLength > 9" class="loadMore" @click="LoadMore">
        点击加载更多
      </view>
      <view v-else class="loadMore" @click="LoadMore">
        抱歉，给不了您更多啦！！！
      </view>
    </view>
  </view>
</template>

<script>
import {
  getAllSystemList,
  getSystemAccessories
} from "@/api/accessoriesApi.js"; // 引入封装的请求函数
import MyStore from '@/store/index.js'

export default {
  data() {
    return {
      tabIndex: 0,
      tabList: [{ //给个默认值，以免没有数据的时候报错
        label: "",
        index: 0
      }],
      tabListLength: 0,
      page: 1,
      pageLength: 0, //每页数据的数据长度
      showAccessories: [],
      clickLabel: '',
      loadMoreMessage: true,
    };
  },
  methods: {
    changeTab(index) {
      this.loadMoreMessage = true
      this.page = 1; //切换TAB后加载page为1的一页
      this.showAccessories = []; //清空其他TAB下的配件数据
      this.tabIndex = index;
      MyStore.dispatch("setChooseAccessoriesTabAsync", this.tabIndex);
      this.clickLabel = this.tabList[index].label; //没有数据时为"",且有一个下划线
      this.onLoadClickSystemDatas(this.page, this.clickLabel);
    },
    async onLoadAllSystemList() {
      try {
        const data = await getAllSystemList();
        this.tabListLength = data.length;
        this.tabList = data.map((item, index) => ({
          label: item.name,
          index: index,
        }));
      } catch (err) {
        uni.showToast({
          title: "服务器罢工了",
          image: '/static/image/icon/Disconnected.png',
          duration: 2000
        })
      }
    },
    async onLoadClickSystemDatas(page, label) {
      try {
        const accessories = await getSystemAccessories(page, label);
        this.showAccessories = accessories; //接受所点击的Tab对应的数据
        this.pageLength = accessories.length;
      } catch (err) {
        uni.showToast({
          title: "服务器罢工了",
          image: '/static/image/icon/Disconnected.png',
          duration: 2000
        })
      }
    },
    async LoadMore() {
      try {
        this.page++;
        let accessories = await getSystemAccessories(this.page, this.clickLabel);
        if (accessories.length != 0) {
          if (accessories.length < 10) {
            this.loadMoreMessage = false;
          }

          // 遍历对象的键，将 "0" 和 "1" 的键名都加上 10，并重新赋值
          for (const key in accessories) {
            const newKey = String(Number(key) + 10);
            accessories[newKey] = accessories[key];
            delete accessories[key];
          }
          // 将更改了键名的数据加如原来的[]中
          for (const key in accessories) {
            this.showAccessories.push(accessories[key]);
          }
        } else {
          this.loadMoreMessage = false;
        }


      } catch (error) {
        console.error("发生错误：", error);
      }
    },
    getCommonStyle(index) {
      // 根据 index 的值返回不同的样式对象
      if (index === 0) {
        return {
          margin: '170rpx 0 50rpx',
          // 其他样式属性
        };
      } else {
        return {
          margin: '170rpx 0 50rpx',
          // 其他样式属性
        };
      }
    }


  },
  async onLoad() {
    await this.onLoadAllSystemList();
    this.changeTab(0);
  },


  async onPullDownRefresh() {
    await this.onLoadAllSystemList();
    this.changeTab(MyStore.getters.getChooseAccessoriesTab);
    // 可用来刷新页面的数据
    uni.stopPullDownRefresh();
  }
};
</script>


<style lang="scss">
page {
  background-color: #333333;
}

.allBack {
  .topBlank {
    position: fixed;
    top: 0;
    left: 0;
  }

  .topbar {
    position: fixed;
    top: 90 rpx;
    left: 0;
  }

  .content {
    padding-top: 10 rpx;

    .common-style {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      /* 换行 */
    }
  }

  .loadMore {
    color: white;
    padding-bottom: 100 rpx;
    text-align: center;
  }
}
</style>
